<script lang="ts" setup>
import { Search, Refresh } from '@element-plus/icons-vue'
import { HttpStatusCode } from 'axios'
import { ElMessage } from 'element-plus'
import { getWxUserPage } from '../../api/wxUser'
import { roleList } from '../../enums/Role'
import DataTable from './components/DataTable/index.vue'

let userList = ref<WxUser[]>([])
let role_list = [
  { id: 0, label: '全部', value: '' },
  ...roleList
]
let search_key = ref('')
//TODO 角色筛选
let role = ref(role_list[0].value)

const pagination = reactive<Page>({})
let loading = ref(false)

const getData = async (page: number, search_key: string, role: string) => {
  loading.value = true
  const res = await getWxUserPage(page, search_key, role)
  if(res.statusCode === HttpStatusCode.Ok) {
    userList.value = res.data.data as WxUser[]
    pagination.current = page
    pagination.total = res.data.total
    pagination.pageSize = res.data.pageRow
    loading.value = false
  } else {
    ElMessage({
      message: '获取失败，请重试',
      type: 'error',
    })
  }
}

const searchFun = () => {
  getData(1, search_key.value, role.value)
}

const resetFun = () => {
  search_key.value = ''
  getData(1, search_key.value, role.value)
}

const handleChange = (val: number) => {
  getData(val, search_key.value, role.value);
}

const handleRoleChange = (value: string) => {
  role.value = value
  getData(1, search_key.value, role.value)
}

onMounted(() => {
  getData(1, search_key.value, role.value)
})
</script>

<template>
  <div class="header">
    <div class="btn_group">

    </div>
    <div class="search_group">
<!--      <span style="font-size: 12px;margin-right: 10px;">角色筛选</span>-->
      <el-select v-model="role" style="margin-right: 20px;" placeholder="选择角色" @change="handleRoleChange">
        <el-option
            v-for="item in role_list"
            :key="item.id"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <el-input placeholder="输入名称" v-model="search_key" />
      <el-button class="search_btn" type="primary" :icon="Search" color="#232442" @click="searchFun"></el-button>
      <el-button class="search_btn" type="primary" :icon="Refresh" color="#232442" @click="resetFun"></el-button>
    </div>
  </div>
  <div class="bodyer">
    <DataTable :data-list="userList" :loading="loading"  />
    <el-pagination class="page" background layout="prev, pager, next" :total="pagination.total"
                   :current-page="pagination.current"
                   @current-change="handleChange" />
  </div>
</template>

<style lang="less" scoped>
@import '../../styles/baseAdmin.less';
</style>
